import React, { useEffect, useRef } from 'react'

const ParkingMap = ({ canvasRef, slots, guides, startSlot }) => {
  const draw = () => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 绘制车位
    slots.forEach((slot) => {
      ctx.fillStyle = slot.occupied ? '#FF5252' : '#4CAF50'
      ctx.fillRect(slot.x, slot.y, 60, 30)
      ctx.fillStyle = '#fff'
      ctx.font = '14px Arial'
      ctx.textAlign = 'center'
      ctx.fillText(slot.id, slot.x + 30, slot.y + 20)
    })

    // 绘制引导线
    guides.forEach((guide) => {
      ctx.beginPath()
      ctx.moveTo(guide.start.x, guide.start.y)
      ctx.lineTo(guide.end.x, guide.end.y)
      ctx.strokeStyle = '#FF5722'
      ctx.lineWidth = 3
      ctx.stroke()

      // 绘制箭头
      const angle = Math.atan2(
        guide.end.y - guide.start.y,
        guide.end.x - guide.start.x
      )
      ctx.beginPath()
      ctx.moveTo(guide.end.x, guide.end.y)
      ctx.lineTo(
        guide.end.x - 15 * Math.cos(angle - Math.PI / 6),
        guide.end.y - 15 * Math.sin(angle - Math.PI / 6)
      )
      ctx.lineTo(
        guide.end.x - 15 * Math.cos(angle + Math.PI / 6),
        guide.end.y - 15 * Math.sin(angle + Math.PI / 6)
      )
      ctx.closePath()
      ctx.fillStyle = '#FF5722'
      ctx.fill()
    })

    // 高亮起点车位
    if (startSlot) {
      ctx.strokeStyle = '#2196F3'
      ctx.lineWidth = 3
      ctx.strokeRect(startSlot.x - 2, startSlot.y - 2, 64, 34)
    }
  }

  React.useEffect(draw, [slots, guides, startSlot])
  return null
}
export default ParkingMap
